<template>
  <view class='askquestion'>
    <view class="kong"></view>
    <view class="searchbox flexs1">
      <image class="back_img"
             @click="goback"
             src="../../static/image/ico_dh_bk@2x.png"></image>
      <view class="top_kuang flexs1">
        <image class="border_serch"
               src="../../static/image/ico_ss@2x.png"
               mode=""></image>
        <input type="text"
               placeholder-style="font-size: 28rpx; color:#999999;"
               placeholder="输入关键字">
      </view>
      <navigator url="/pages/askquestion/myask"
                 class='askquery'>
        <image class='askqueryimg'
               src='../../static/image/zxwb_ico_tw@2x.png'></image>
        <view style="font-size: 22rpx;">提问</view>
      </navigator>
    </view>
    <view class='categoryone'>
      <view @click="changeStatus('')"
            :class="{activetoggle:queryParams.status==''}"
            class='onitem'>全部提问</view>
      <view @click="changeStatus(1)"
            :class="{activetoggle:queryParams.status==1}"
            class='onitem'>未解决</view>
      <view @click="changeStatus(2)"
            :class="{activetoggle:queryParams.status==2}"
            class='onitem'>已解决</view>
    </view>
    <view class='categorytwo'
          v-show="!flag">
      <view class='inview'>
        <view class='itembox '
              :class="{twoactivetoggle:queryParams.cate_ids==''}"
              @click="cateChoose('')">不限</view>
        <block>
          <view v-for="el in cateList"
                :key="el.id"
                :class="{twoactivetoggle:queryParams.cate_ids==el.id}"
                @click="cateChoose(el.id)"
                class='itembox'>{{el.name}}</view>
        </block>
      </view>
      <view class='addimgbox'>
        <image @click="flag=true"
               src='../../static/image/zxwb_ico_tj@2x.png'
               class='addimg'></image>
      </view>
    </view>
    <view v-show="flag"
          class="choosecategory">
      <image class='closeimg'
             @click="toggle"
             src='../../static/image/zxwb_ico_gb@2x.png'></image>
      <view class='titlechoose'>请选择类型</view>
      <view class='itemcategorybox'>
        <block>
          <view v-for="el in cateList"
                :key="el.id"
                :class="{activecolor:queryParams.cate_ids==el.id}"
                @click="cateChoose(el.id)"
                class='itemcategory '>{{el.name}}</view>

        </block>
      </view>
    </view>

    <view v-show="queList.length>0||flag==false"
          class='commentbox'>
      <block>
        <view class="comment_title">
          <view class="comment_line"></view>问题列表({{queList.length}})
        </view>
        <block>
          <view class="item_comment"
                v-for="el in queList"
                :key="el.id">
            <view class='titlebox'>
              <image class='avatarimg'
                     :src='$serverIp+el.user.avatar'></image>
              <view class='titlebox_right'>
                <view class='nickname'>{{el.user.nickname}}</view>
                <view class='timescreen'>{{el.createtime}}</view>
              </view>
            </view>
            <view class='contentcontent'>{{el.content}}</view>
            <view class='bottombox'>
              <view class='itembottom'>
                <image class='iconcomment'
                       src='../../static/image/zpzx_ico_pl@2x.png'></image>
                <view>{{el.comment_num}}</view>
              </view>
              <view class='itembottom'></view>
              <view class='itembottom'></view>
            </view>
          </view>
        </block>
      </block>

    </view>
    <!-- 搜索结果为空样式 -->
    <block>
      <view v-show="queList.length<1"
            class="none_box">
        <view class="none_kong"></view>
        <image src="../../static/image/zcht_img_k@2x.png"></image>
        <view>暂无信息</view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cateList: [],
      flag: false,
      queList: [],
      queryParams: { page: 1, limit: 20, cate_ids: '', status: '', search: '' }
    }
  },
  methods: {
    async getCateLst() {
      let { data } = await this.$http.post('/ask/cate')
      this.cateList = data.data
    },
    async getQueList() {
      let { data } = await this.$http.post('/ask/index', this.queryParams)
      this.queList = data.data.list
    },
    cateChoose(e) {
      this.queryParams.cate_ids = e || ''
      this.getQueList()
    },
    changeStatus(e) {
      this.queryParams.status = e
      this.getQueList()
    },
    toggle() {
      this.flag = false
      this.getQueList()
    }
  },

  onShow() {
    this.getQueList()
    this.getCateLst()
  }
}
</script>

<style>
.askquestion {
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
}
.kong {
  width: 100%;
  height: var(--status-bar-height);
  background-color: #ffffff;
}
.searchbox {
  height: auto;
  padding: 10rpx 0;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back_img {
  width: 20rpx;
  height: 36rpx;
  margin: 0 20rpx 0 30rpx;
}

.top_kuang {
  width: 570rpx;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  margin-right: 30rpx;
  display: flex;
  align-items: center;
}

.border_serch {
  width: 28rpx;
  height: 30rpx;
  margin: 0 20rpx 0 25rpx;
}

uni-input {
  width: 520rpx;
}
.askquery {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border:1rpx solid red; */
}
.askqueryimg {
  width: 36rpx;
  height: 36rpx;
  margin-bottom: 5rpx;
}

.categoryone {
  height: 80rpx;
  width: 100%;
  padding: 0 30rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1rpx solid #eeeeee;
}
.onitem {
  position: relative;
  width: 150rpx;
  text-align: center;
  height: auto;
  /* border:1rpx solid red; */
  font-size: 30rpx;
}
.activetoggle,
.twoactivetoggle {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.activetoggle::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background: #ffdd47;
  border-radius: 2rpx;
}
.twoactivetoggle::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 30rpx;
  height: 4rpx;
  background: #ffdd47;
  border-radius: 2rpx;
}

.categorytwo {
  width: 100%;
  height: 100rpx;
  /* border:1rpx solid red; */
  position: relative;
  background-color: #ffffff;
}
.inview {
  width: 85%;
  height: 100rpx;
  display: flex;
  align-items: center;
  /* overflow: hidden; */
  overflow-y: scroll;
  /* border:1rpx solid red; */
  padding-left: 10rpx;
}
.itembox {
  padding: 0 10rpx;
  flex-shrink: 0;
  position: relative;
}
.addimgbox {
  position: absolute;
  z-index: 99;
  top: 50%;
  right: 10rpx;
  transform: translateY(-50%);
  /* background: #000000; */
  /* opacity: 0.1; */
  border-left: 1rpx solid #eeeeee;
  height: 50rpx;
  width: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.addimg {
  width: 26rpx;
  height: 26rpx;
}

/* 评价列表 */
.commentbox {
  width: 100%;
  background-color: #ffffff;
  margin-top: 20rpx;
  height: auto;
  padding: 30rpx 30rpx 0rpx;
}

/* 搜索结果为空样式 */
.none_box {
  width: 100%;
  height: 520rpx;
  font-size: 26rpx;
  color: #666666;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.none_kong {
  width: 100%;
  height: 168rpx;
}

.none_box image {
  width: 354rpx;
  height: 253rpx;
}
/* 搜索结果为空样式 */

.comment_title {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30rpx;
}
.comment_line {
  width: 4rpx;
  height: 20rpx;
  background: #ffdd47;
  border-radius: 2rpx;
  margin-right: 10rpx;
}
.item_comment {
  /* border:1rpx solid red; */
  padding-bottom: 30rpx;
}
.titlebox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: auto;
}
.avatarimg {
  height: 70rpx;
  width: 70rpx;
  border-radius: 50%;
}
.titlebox_right {
  margin-left: 20rpx;
  height: 70rpx;
  width: auto;
  /* border:1rpx solid red; */
  display: flex;
  /* align-items: ; */
  flex-direction: column;
  justify-content: space-around;
}
.nickname {
  height: 30rpx;
  font-size: 30rpx;
  line-height: 30rpx;
  width: 300rpx;
}
.timescreen {
  height: 30rpx;
  line-height: 30rpx;
  width: 300rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.contentcontent {
  margin: 10rpx 0rpx 10rpx;
}

/* 评论图标 */
.bottombox {
  width: 100%;
  height: 50rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.itembottom {
  /* width:200rpx; */
  width: auto;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconcomment {
  width: 28rpx;
  height: 26rpx;
  margin-right: 20rpx;
}
/* 评价列表 */

/* 类型选择 */
.choosecategory {
  width: 100%;
  height: 100%;
  position: relative;
  /* padding: 0 30rpx; */
  padding: 0 7rpx;
  background-color: #ffffff;
}
.titlechoose {
  height: 100rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  padding-top: 40rpx;
  padding-left: 17rpx;
  line-height: 60rpx;
  width: 100%;
}
.closeimg {
  height: 21rpx;
  width: 21rpx;
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}
.itemcategorybox {
  height: auto;
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-start;
  flex-wrap: wrap;
}
.itemcategory {
  width: 164rpx;
  height: 70rpx;
  margin: 0 10rpx;
  text-align: center;
  line-height: 70rpx;
  border: 1rpx solid #f5f5f5;
  background: #f5f5f5;
  border-radius: 6rpx;
  margin-bottom: 20rpx;
}
.activecolor {
  border: 1rpx solid #fcb630;
  background: #ffedca;
}
</style>
